<template>
    <div class="fadiv">
        <div class="headerdiv">
            <button @click="returnhome" class="rethome">返回主界面</button>
            <p class="title">人事管理系统游客界面</p>
        </div>
        <div class="fundiv">
            <button @click="gotodept" class="deptcon" >部门管理</button>
            <button @click="gotosta" class="deptcon">岗位管理</button>
            <button @click="gotoindu" class="deptcon">入职管理</button>
            <button class="deptcon">试用期管理</button>
            <button class="deptcon">部门调动管理</button>
            <button class="deptcon">岗位调动管理</button>
            <button class="deptcon">员工离职管理</button>
            <button class="deptcon">员工信息管理</button>
            <button @click="gotorema" class="deptcon">报表管理</button>
        </div>
        <div class="showdiv">
            <p class="litletitle">欢迎来到人事管理系统</p>
        </div>
    </div>
</template>

<script>
export default{
    methods:{
        returnhome(){
            this.$router.replace('/')
        },
        gotodept(){
            this.$router.push('/DeptMageCl')
        },
        gotosta(){
            this.$router.push('/StationCl')
        },
        gotoindu(){
            this.$router.push('/InductionCl')
        },
        gotorema(){
            this.$router.push('/ReportmaCl')
        }
    }
}
</script>


<style scoped>
.fadiv{
    position: fixed;
    width:100%;
    height: 100%;
    margin: -8px;
    background-size: 100% 100%;
}

.headerdiv{
    background: url("../assets/4.jpg");
    background-size: 1920px 80px;
    width:100%;
    height: 80px;
    float: left;
}

.fundiv{
    background-color: pink;
    width: 220px;
    height: 100%;
    float: left;
}

.showdiv{
    float: left;
    background: url("../assets/3.jpg");
    height: 100%;
    width: 1700px;
}

.title{
    font-size: 44px;
    width: 800px;
    text-align: center;
    align-items: center;
    margin-top: 10px;
    margin-left: 400px;
    background: linear-gradient(to right,rgb(141, 116, 15),rgb(114, 113, 109));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.litletitle{
    font-size: 70px;
    color: gold;
    text-align: center;
    align-items: center;
    margin-top: 250px;
}

.rethome{
    width: 200px;
    height: 80px;
    font-size: 22px;
    color: gold;
    float: right;
    background-color:transparent;
    border-left-style: solid;
    border-left-color: gold;
    cursor: pointer;
    background: linear-gradient(to right,red,blue);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.deptcon{
    width: 220px;
    height: 99px;
    font-size: 26px;
    line-height: 100px;
	text-align: center;
	color: #fff;
	background-image: linear-gradient(to right,#686107,#1a1b1b );
    cursor: pointer;
    /* border: solid 1px white; */
}

</style>